<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>顾客详情</title>
    <!-- Bootstrap core CSS-->
    <link href="/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom fonts for this template-->
    <link href="/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- Page level plugin CSS-->
    <link href="/sb/vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
    <link href="/sb/vendor/datatables/select.bootstrap.min.css" rel="stylesheet">
    <link href="/select2/css/select2.css" rel="stylesheet">
    <link href="/css/scrollbar.css" rel="stylesheet">
    <link href="/css/default.css" rel="stylesheet">

    <style type="text/css">
        #customer-offer_wrapper.dataTables_wrapper {
            width: 75vw;
            margin: 0 auto;
        }

        .select2-dropdown--below {
            z-index: 19891019;
        }
    </style>
</head>

<body class="bg-dark scroll-style" style="overflow-x: hidden;">

<div ng-app="customerApp" ng-controller="customerController">
    <!-- Breadcrumbs-->
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="/pages/customer.html">顾客管理</a>
        </li>
        <li class="breadcrumb-item active">顾客详情&gt;&gt;
            <strong><span ng-bind="customer.name"></span>[<span ng-bind="customer.phone"></span>]</strong>
        </li>
    </ol>

    <div class="row mb-3">
        <input type="hidden" name="customerSid" ng-model="customerSid"/>
        <div class="col-xl-4 col-sm-4 mb-4">
            <div class="card">
                <div class="card-header">
                    <span class="float-left">邀约信息</span>
                    <a class="float-right a-more" href="javascript:void(0);"
                       data-href="/pages/customer-offer.html">
                        更多&nbsp;&gt;&gt;
                    </a>
                </div>
                <div class="card-body card-height mb-3" style="position: relative;">
                    <div ng-bind="offer.remark"></div>
                    <div class="small text-muted" style="position: absolute; bottom: 0;">
                        到店时间：<span ng-bind="offer.visitBeginTime"></span>
                        <br/>
                        离店时间：<span ng-bind="offer.visitEndTime"></span>
                    </div>
                </div>
                <div class="card-footer small text-muted">邀约日期：<span ng-bind="offer.createTime"></span></div>
            </div>
        </div>
        <div class="col-xl-4 col-sm-4 mb-4">
            <div class="card">
                <div class="card-header">
                    <span class="float-left">反馈信息</span>
                    <a class="float-right a-more" href="javascript:void(0);"
                       data-href="/pages/customer-feedback.html">
                        更多&nbsp;&gt;&gt;
                    </a>
                </div>
                <div class="card-body card-height mb-3">
                    <div ng-bind="feedback.remark"></div>
                </div>
                <div class="card-footer small text-muted">反馈日期：<span ng-bind="feedback.createTime"></span></div>
            </div>
        </div>
        <div class="col-xl-4 col-sm-4 mb-4">
            <div class="card">
                <div class="card-header">
                    <span class="float-left">充值记录</span>
                    <a class="float-right a-more" href="javascript:void(0);"
                       data-href="/pages/customer-cash.html">
                        更多&nbsp;&gt;&gt;
                    </a>
                </div>
                <div class="card-body card-height mb-3">
                    上次充值：<span ng-bind="cash.cash"></span>
                </div>
                <div class="card-footer small text-muted">充值日期：<span ng-bind="cash.createTime"></span></div>
            </div>
        </div>
    </div>

</div>

<div class="card mb-3">
    <div class="card-header">开卡信息</div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="customer-card" width="100%" cellspacing="0">
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="customerCardDetail">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">顾客<span ng-bind=""></span>耗卡记录</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="table-responsive scroll-style" style="max-height: 65vh;">
                    <table class="table table-bordered" id="customer-card-detail" width="100%" cellspacing="0">
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="btnCustomerCardDetail" data-toggle="modal"
                        data-target="#customerCardDetail">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>

<div id="serve-employee-select" class="modal-content hide">
    <div class="modal-body">
        <div class="row">
            <div class="col">
                <select id="employeeSid" name="employeeSid" class="form-control">
                </select>
            </div>
        </div>
    </div>
</div>


<!-- Bootstrap core JavaScript-->
<script src="/sb/vendor/jquery/jquery.min.js"></script>
<script src="/sb/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/sb/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Page level plugin JavaScript-->
<script src="/sb/vendor/datatables/jquery.dataTables.js"></script>
<script src="/sb/vendor/datatables/dataTables.bootstrap4.js"></script>
<script src="/sb/vendor/datatables/dataTables.select.min.js"></script>
<!-- Custom scripts for this page-->
<script src="/js/angular.min.js"></script>
<script src="/layer/layer.js"></script>
<script src="/js/jquery.form.js"></script>
<script src="/js/jquery.formautofill.min.js"></script>
<script src="/select2/js/select2.full.js"></script>
<script src="/select2/js/i18n/zh-CN.js"></script>
<script src="/js/util.js"></script>
<script src="/js/render.js"></script>
<script src="/js/select.js"></script>
<script src="/js/my.datatables.server.js"></script>
<script src="/js/my.select2.js"></script>

<script type="text/javascript">
    layer.config({
        extend: '/extend/layer.ext.js'
    });

    var sid = getQueryString('sid');
    console.log(sid);

    var customerApp = angular.module('customerApp', []);
    customerApp.controller('customerController', function ($scope, $http) {
        $scope.customerSid = sid;
        //
        $http.get('/myCustomer/getLastInfo',
            {
                params: {customerSid: sid}
            }
        ).then(function (o) {
            console.log(o);
            $scope.customer = o.data.data.customer;
            $scope.offer = o.data.data.offer;
            $scope.feedback = o.data.data.feedback;
            $scope.cash = o.data.data.cash;
            console.log($scope);
        }).catch(function (o) {
            console.error(o);
        });
    });

    /**
     * 卡名渲染
     */
    var cardRender = function (data, type, row, meta) {
        var qty = row.remainQty;
        if (qty < 1) {
            return data;
        }
        return '<a href="javascript:costCard(\'{0}\')">{1}</a>'.format(row.sid, data);
    };

    var detailRender = function (data, type, row, meta) {
        return '<a href="javascript:detail(\'{0}\')" class="fa fa-indent"></a>'.format(row.sid);
    };

    var update;

    /**
     * 服务员工
     */
    var employeeSelect;
    var costCard;

    var detail;

    $(function () {

        var tools = '\
            <div class="btn-group">\
                <a class="btn btn-info fa fa-plus-square-o" \
                    data-toggle="modal" \
                    data-target="#addModal">&nbsp;新增</a>\
                <a class="btn btn-info fa fa-edit" onclick="update()">&nbsp;更新</a>\
                <a class="btn btn-info btn-delete fa fa-minus-square-o">&nbsp;删除</a>\
            </div>\
        ';

        // 顾客开卡信息
        var customerCardGrid = $('#customer-card').DGrid({
            gridName: 'tb_customer_card', // 给 grid起个名
            tools: tools, // 操作按钮组
            sequence: true,
            checkbox: false,
            removeUrl: '/customerCardInfo/deleteByIds',
            gridOptions: {
                ajax: {
                    type: 'POST',
                    url: '/customerCardInfo/page' // 分页url
                },
                order: [[1, 'desc']]
            },
            fnServerParams: function (aoData) {
                aoData.target['customerSid'] = sid;
                aoData.target['type'] = 1;
                aoData['searchFields'] = ['cardName', 'employeeName'].join(',');
            },
            searchTip: '请输入卡名或开卡员工',
            hidden: [{customerSid: sid}, {type: 1}, {employeeName: ''}, {cardName: ''}],
            add: {
                title: '顾客开卡',
                url: '/myCustomerCardInfo/add'
            },
            update: {
                title: '顾客耗卡',
                url: '/customerCardInfo/update',
                detailUrl: '/customerCardInfo/detail'
            }
        });

        // 更新方法
        update = function () {
            var ok = customerCardGrid.fillUpdateModel();
            if (ok) {
                $('#btnUpdateModel').trigger('click');
            }
        };

        /**
         * 服务员工
         */
        employeeSelect = employeeSelect('employeeSid');
        costCard = function (pid) {
            layer.open({
                title: '耗卡确认',
                type: 1,
                content: $('#serve-employee-select'),
                btn: ['确认', '取消'],
                yes: function (index) {
                    var selectItem = employeeSelect.selectItem;
                    console.log(selectItem);
                    $.post('/myCustomerCardInfo/add',
                        {
                            customerSid: sid,
                            parentSid: pid,
                            employeeSid: selectItem.id,
                            employeeName: selectItem.text,
                            type: 2,
                            qty: 1
                        },
                        function (o) {
                            console.log(o);
                            customerCardGrid.reload();
                            layer.close(index);
                        }
                    );
                },
                cancel: function (index) {
                    layer.close(index);
                }
            });
        };

        // 更新 iframe src
        $('a.a-more').click(function () {
            var href = ($(this).attr('data-href') + '?sid={0}').format(sid);
            console.log(href);
            $('#content-iframe', window.parent.document).prop('src', href);
        });

        var pid;
        var customerCardDetailGrid = $('#customer-card-detail').DGrid({
            gridName: 'tb_customer_card_detail', // 给 grid起个名
            sequence: true,
            checkbox: false,
            removeUrl: '/customerCardInfo/deleteByIds',
            gridOptions: {
                ajax: {
                    type: 'POST',
                    url: '/customerCardInfo/page' // 分页url
                },
                order: [[1, 'desc']]
            },
            fnServerParams: function (aoData) {
                aoData.target['customerSid'] = sid;
                aoData.target['parentSid'] = pid;
                aoData.target['type'] = 2;
                aoData['searchFields'] = ['employeeName'].join(',');
            },
            searchTip: '请输入服务员工'
        });

        /**
         *
         */
        detail = function (sid) {
            pid = sid;
            console.log(pid);
            customerCardDetailGrid.reload();
            $('#btnCustomerCardDetail').trigger('click');
        };

        /**
         * 弹出框表头处理
         */
        $('.modal').on('shown.bs.modal', function (e) {
            $.fn.dataTable.tables({visible: true, api: true}).columns.adjust();
        });

    });

</script>
<script src="/js/form.init.js"></script>
</body>
</html>
